<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
		 <script src="js/vue_resource.js"></script>
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		 <script src="js/vue_resource.js"></script>
		<style type="text/css">
			.conclusionContainer{
					display: flex;
					flex-direction: column;
					width: 100vw;
					background-color: white;
				}
				.detailTitle{
					width: 100vw;
					display: flex;
					justify-content: center;
					font-size: 18px;
					padding-top: 5px;
					padding-bottom: 5px;
				}
				
				.infoContainer{
					display: flex;
					justify-content: space-between;
					background-color: white;
					align-items: center;
					padding-left: 15px;
					padding-right: 15px;
					font-size: 16px;
					padding-top: 10px;
					padding-bottom: 10px;
					border-top: 1px solid #e0e0e0;
				}
				.content{
					font-size: 14px;
					background-color: #f0f0f0;
					margin:0px 10px 10px 10px;
					padding: 5px;
					border-radius: 5px;
					white-space: pre-line;
				}
				.conclusionInput{
					font-size: 16px;
					margin-top: 5px;
					background-color: #f0f0f0;
					border: 0px;
					margin-left: 15px;
					margin-right: 15px;
					padding: 5px;		
				}
			
		</style>
	<body style="background-color:white;">
		<div id="app">
			<div class="conclusionContainer">
			
				<div class="infoContainer">课程名称：{{classCourse.courseName}}</div>
				
				<div class="infoContainer">
					<span>应到人数：{{classCourse.shouldCome}} 人</span>
					<span>实到人数：{{classCourse.actalCome}} 人</span>
				</div>
				
				<div class="infoContainer">总结</div>
				<textarea
						style="min-height: 50px;"  
						 v-model="classCourse.appraise" 
						 placeholder="请输入课程总结" 
						 class="conclusionInput"></textarea>
						 
				 <div class="gally" style="margin-top: 20px;">
					 <div class="photoConatiner"  v-for="(item,index) in imageList">
						 <img class="image" :style="{'margin-top': (index>2?'6vw':'0px')}"  :src="item" />
						 <img  class="del-image"
							   v-on:click="deleteImage(index)"
							   :style="{'top': (index>2?'6vw':'0px')}"
							   src="img/del_image.png"/>
					 </div>
					 <img v-on:click="getImage()"
						  v-if="imageList.length < 9"
						  :style="{'margin-top': (imageList.length>3?'6vw':'0px')}"
						  class="image"
						  src="img/add_icon.png" />
				 </div>
						 
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  classCourse: {
			  },
			  imageList: []
		  },
		  filters:{
			  formatTime (val) {
				return moment(val).format("HH:mm")  
			  }
		  },
		  created() {
			window.getClassCourse = this.getClassCourse
            window.getImageList = this.getImageList
            window.submit = this.submit
		  },
		  methods:{
              submit(classCourseId,userId){
                let length = this.imageList.length
                let urlArray = []
                let localArray = []
                let formData = new FormData()
                for(let i=0;i<length;i++){
                    if(this.imageList[i].indexOf(serverUrl) == -1){
                        let file = this.blobToFile(this.base64ToBlob(this.imageList[i]),"image_"+i)
                        localArray.push("")
                        formData.append("file",file)
                    }else {
                        urlArray.push(this.imageList[i].replace(serverUrl,""))
                    }
                }

                if(localArray.length > 0) {
                    let url = serverUrl+"fileUpload/uploadFiles"
                    this.$http.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                    .then(res => {
                        urlArray = urlArray.concat(res.data.data)
                        let params = {
                            classCourseId:classCourseId,
                            userId: userId,
                            appraise: this.classCourse.appraise,
                            courseImage: JSON.stringify(urlArray)
                        }
                        WebViewJavascriptBridge.callHandler('submitInfo',params,function(response) {
                                            
                        });
                    })
                }else{
                    let params = {
                        classCourseId:classCourseId,
                        userId: userId,
                        appraise: this.classCourse.appraise,
                        courseImage: JSON.stringify(urlArray)
                    }
                    WebViewJavascriptBridge.callHandler('submitInfo',params,function(response) {
                                        
                    });
                }
            },
			  getClassCourse (classCourse){
				  this.classCourse = classCourse
                  let array = JSON.parse(classCourse.courseImage)
                  for(let i=0;i<array.length;i++){
                      array[i] = serverUrl+array[i]
                  }
                  this.imageList =array
			  },
			  deleteImage (index) {
			      this.imageList.splice(index,1)
			  },
			  getImageList (imageList) {
			      this.imageList = this.imageList.concat(imageList)
			  },
			  getImage () {
			      var params = {
			        count:this.imageList.length
			      }
			       WebViewJavascriptBridge.callHandler('chooseImage',params,function(response) {
			                           
			       });
			  },
			  base64ToBlob(base64Data) {
			     let arr = base64Data.split(',')
			     let fileType = arr[0].match(/:(.*?);/)[1]
			     let bstr = atob(arr[1])
			     let l = bstr.length
			     let u8Arr = new Uint8Array(l)
			         
			     while (l--) {
			         u8Arr[l] = bstr.charCodeAt(l);
			     }
			     return new Blob([u8Arr], {
			         type: fileType
			     });
			  },
			  blobToFile(newBlob, fileName) {
			      let array = newBlob.type.split('/')
			      let file = new File([newBlob], fileName+'.'+array[1], {type: newBlob.type, lastModified: Date.now()});
			      
			  
			      return file;
			  }
		  }
		})		
		</script>
</html>
